import { load } from "/web/util/LoadView.js";
load('products');

async function renderCarousel() {
    let res = await fetch('http://localhost:3000/products').then(res => res.json())
    let indicators = document.querySelector('.carousel-indicators')
    indicators.innerHTML = res.map((item,index) => `
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="${index}" 
        ${index ==0 ? 'class="active" aria-current="true"' : ''} aria-label="Slide ${index+1}"></button>
    `).join('')
    // console.log(indicators.innerHTML)
    let inner = document.querySelector('.carousel-inner')
    inner.innerHTML = res.map((item,index) => 
        `
        <div class="carousel-item ${index == 0 ? 'active' : ''}">
            <div class="imgstyle" style="background-image: url(${item.cover});"></div>
            <div class="carousel-caption d-none d-md-block">
                <h5>${item.title}</h5>
                <p>${item.introduction}</p>
            </div>
        </div>
        `
    ).join('')
    // console.log("inner",inner.innerHTML)
}
renderCarousel()